<template>
	<div>
		<h1>学校：{{ school }}，课程：{{ subject }}</h1>
		<h1>当前求和为：{{ sum }}</h1>
		<h2>放大10倍后的值：{{ bigSum}}</h2>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment(n)">+</button>
		<button @click="decrement(n)">-</button>
		<button @click="incrementOdd(n)">当前求和为奇数再加</button>
		<button @click="incrementWait(n)">等一等再加</button>
	</div>
</template>

<script>
	// 引入mapState
	import { mapState,mapGetters,mapMutations,mapActions} from 'vuex';
	export default {
		name:'Count',
		data() {
			return {n:1}
		},
		computed:{
			// 程序员自己手写计算属性
			/*
			sum(){
				return this.$store.state.sum
			},
			school(){
				return this.$store.state.school
			},
			bigSum(){
				return $store.getters.bigSum 
			}
			*/

			/**
			 * ...Obj是es6中的语法，即将对象中每个属性和值都拿出来
			 * 		比如Obj = {name:'tom',age:19}，则...Obj后变为如下
			 * 			name:'tom',
			 * 			age:19
			 */
			// 借助mapState生成计算属性，从state中读取数据。(对象写法)
			// ...mapState({sum:'sum',school:'school',subject:'subject'})

			// 借助mapState生成计算属性，从state中读取数据。(数组写法)
			...mapState(['sum','school','subject']),
			// 借助mapGetters生成计算属性，从getters中读取数据。
			...mapGetters(['bigSum'])
		},
		methods: {
			// 程序员自己写的方法
			/*
			increment(){
				// 此处调commit，直接走的mutation节点，跳过了actions节点
				this.$store.commit('ADD',this.n)
			},
			decrement(){
				this.$store.commit('SUB',this.n)
			},
			incrementOdd(){
				// 调dispatch，先走actions节点
				this.$store.dispatch('addOdd',this.n)
			},
			incrementWait(){
				this.$store.dispatch('addWait',this.n)
			},
			*/
			// 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations
			// 方法中的参数要在调用时传递
			...mapMutations({increment:'ADD',decrement:'SUB'}),
			// ...mapMutations(['increment','decrement']), // key和value相同，则可简写成数组形式
			// 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions
			...mapActions({incrementOdd:'addOdd',incrementWait:'addWait'})
		},
	}
</script>

<style lang="css">
	button{
		margin-left: 5px;
	}
</style>
